import * as React from 'react'
import { getAssignment, getReviewQuiz } from '../../../actions/assignment';
import { connect } from 'react-redux';
import { Card } from 'antd/es';
import ReviewQuizBox from '../../common/ReviewQuizBox';
import TwsReactMarkdownPreview from '../../common/markdown/MarkdownPreview'

class SingleLanguageOnlineCodingBody extends React.Component<any>{

    componentDidMount = () => {
        const { id, quizId } = this.props
        this.load(id, quizId)
    }


    load = (assignmentId: number, quizId: number) => {
        this.props.getAssignment(assignmentId)
        this.props.getReviewQuiz(assignmentId, quizId)
    }

   
    render() {
        let { quizzes, reviewQuiz } = this.props
        const quiz = quizzes[0] || {}

        return <Card title={quiz.assignmentTitle}
            noHovering
            bordered={false}
            extra={<ReviewQuizBox reviewQuiz={reviewQuiz} />}
            key={0}>
            <div>
                <h4>作业内容</h4>
                <div className='markdown-wrap'>
                    <TwsReactMarkdownPreview source={quiz.description} />
                </div>
            </div>
           
        </Card>
    }
}

const mapStateToProps = ({ assignment, reviewQuiz }:
    { assignment: Array<any>, reviewQuiz: any }) => ({
        reviewQuiz,
        quizzes: assignment
    })

const mapDispatchToProps = (dispatch: Function) => ({
    getAssignment: (assignmentId: number) => dispatch(getAssignment(assignmentId, () => { })),
    getReviewQuiz: (assignmentId: number, quizId: number) => dispatch(getReviewQuiz(assignmentId, quizId))
})

export default connect(mapStateToProps, mapDispatchToProps)((SingleLanguageOnlineCodingBody))
